<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>SHOW出你的feel</title>
    <style>
            *{border:0;margin:0;padding:0;}
            body{overflow: hidden;font-family: "微软雅黑";}
            html,body{height:100%;overflow:hidden;position:relative;}
            .scene1{overflow: hidden;}
            .swiper-container{}
            .swiper-slide{}
            .scene1{width:100%;height:100%;}
            .swiper-container{margin-top:10%;}
            .swiper-slide img{max-width: 100%;}
            .showTxt{position:absolute;top:10%;left:5%;width:80%;z-index:9;background-color:rgba(0,0,0,0);font-family:'microsoft yahei'}
            .showBtn{text-align: center;line-height:3em;width:50%;margin:60px auto;border:1px solid #666;border-radius: 10px;}
           .textChange{width:15%;position:absolute;top:10%;}
             .textChange li{background-color:#666;color:#fff;line-height:2.6em;text-align:center;}
             .showMe{margin-top:50%;text-align:center;}
    </style>
    <style>
            .scene2{overflow: hidden;}
            .btomBtn{position:absolute;bottom:0;left:0;z-index: 10;width:100%;height:40px;background-color:#999;font-size:18px;}
            .btomBtn div{position:relative;float:left;width:50%;text-align: center;line-height: 40px;color:#fff;font-weight: bold;}
            .btomBtn-l input{position:absolute;left:0;top:0;width:100%;height:100%;opacity: 0;}   
            .clipPhoto{position:absolute;overflow:visible;left:15%;top:50px;width:70%;} 
            .mask{position:absolute;z-index:9;background-color:#000;opacity: .5;}
            .mask-l{left:0;height:100%;width:15%;}
            .mask-r{right:0;height:100%;width:15%;}
            .mask-t{top:0;left:15%;height:100px;width:70%;}
            .mask-b{width:70%;left:15%;bottom:0;}
    </style>
    <style>
            .scene3{width:100%;height:100%;}
            .scene3 img{position:relative;width:100%;}
    </style>
    <link href="https://cdn.bootcss.com/Swiper/4.0.1/css/swiper.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/Swiper/4.0.1/js/swiper.min.js"></script>
    
    <!--
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    
    
    
    <script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.min.js"></script>
    -->
    <script src="js/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/unmatrix.js"></script>
    <script src="js/exif.js"></script>
</head>
<body>
        <div class="scene3" style="display: none;">
                <img src="" class="finalImg"/>
        </div>
        
        <div class="scene1">
                <ul class="textChange">
                        <li>大小</li>
                        <li>颜色</li>
                        <li>排列</li>
                </ul>
                
                <div class="swiper-container">
                    <input type="text" class="showTxt" value="在这里输入文字"/>           
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><div><img src="img/info1.jpg"/></div></div>
                        <div class="swiper-slide finalWrap"><div class="showMe">上传我自己的照片</div></div>
                        <div class="swiper-slide"><div><img src="img/info2.jpg"/></div></div>
                        <div class="swiper-slide"><div><img src="img/info3.jpg"/></div></div>
                        <div class="swiper-slide"><div><img src="img/info4.jpg"/></div></div>
                    </div>
                </div>
                <div class="showBtn">
                               生成你的照片
                </div>
        </div>
        
        
        <div class="scene2" style="display:none;">
                <div class="clipPhoto" style=""><img class="clipImg" src="" style="position:absolute;transform: translate(0,0);"/></div>
                <img src="" class="clipShow" style="position:absolute;"/>
                <div class="btomBtn">
                        <div class="btomBtn-l">照片<input type="file" class="inputImg"/></div>    
                        <div class="btomBtn-r">确认</div>  
                </div>
                <div class="mask mask-t"></div>
                <div class="mask mask-r"></div>
                <div class="mask mask-b"></div>
                <div class="mask mask-l"></div>
        </div>
        <script>
        function textFn(arr,type){
                var index = 0;
                var _arr = arr;
                var _type = type;
                return function(e){
                        $('.showTxt').css(_type,arr[index]);
                        index++
                        if(index>=_arr.length)index=0;
                }
        }
        var textChange = document.querySelectorAll('.textChange li');
        textChange[0].onclick = textFn([14,18,20,22],'fontSize');
        textChange[1].onclick = textFn(['red','black','white','green','orange','yellow'],'color');
        textChange[2].onclick = textFn(['center','right','left'],'textAlign');  
        
        </script>
        <script>
          var scene1 = document.querySelector('.scene1');
          var scene2 = document.querySelector('.scene2');
          scene1.style.width = scene2.style.width = window.innerWidth+'px';
          scene1.style.height = scene2.style.height = window.innerHeight+'px';
          var swiperContainer = document.querySelector('.swiper-container');
          swiperContainer.style.width = window.innerWidth*.7+'px';
          swiperContainer.style.height = window.innerWidth*.9+'px';
          var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical',
            loop: true
          });     
          
          var showMe = document.querySelector('.showMe');
          showMe.onclick = function(){
                  document.querySelector('.scene2').style.display = 'block';
                  document.querySelector('.scene1').style.display = 'none';
           };
           
           var showBtn = document.querySelector('.showBtn');
           var finalImg = document.querySelector('.finalImg');
           var finalWrap2 = document.querySelector('.swiper-container');
           showBtn.onclick = function(){
                finalWrap = document.querySelector('.swiper-slide-active');
                finalWrap.appendChild(document.querySelector('.showTxt'));
                var canvas = document.createElement('canvas');
                var w = window.innerWidth;
                var h = window.innerHeight;
                canvas.width = w * 2;
                canvas.height = h * 2;
                canvas.style.width = w + "px";
                canvas.style.height = h + "px";
                var ctx = canvas.getContext('2d');
                ctx.webkitImageSmoothingEnabled = false;
                ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;
                ctx.scale(2,2);
                
                html2canvas($(finalWrap),{
                        canvas:canvas,  
                        onrendered:function(canvas) {
                                finalImg.onload = function(){ 
                                        document.querySelector('.scene1').style.display = 'none';
                                        document.querySelector('.scene3').style.display = 'block';
                               }
                               
                               finalImg.src = canvas.toDataURL();
                        },
                useCORS:true,
                allowTaint:true,
                dpi:344,
                scale:2
                });      
           };
        </script>
        
        <script>
                
                var hammer = new Hammer(document.querySelector('.scene2'));
                var clipShow = document.querySelector('.clipShow');
                var inputImg = document.querySelector('.inputImg');
                var clipImg = document.querySelector('.clipImg');
                var $clipImg = $(clipImg);
                var clipPhoto = document.querySelector('.clipPhoto');
                var $clipPhoto = $(clipPhoto);
                var btomBtnR = document.querySelector('.btomBtn-r');
                clipPhoto.style.height = window.innerWidth*.9+'px';
                document.querySelector('.mask-b').style.height = window.innerHeight - 50 - window.innerWidth*.9 +'px';
                var clipImgX = 0;
                var clipImgY = 0;
                var clipImgR = 0;
                var clipImgS = 1;
                hammer.get('pinch').set({ enable: true });
                hammer.get('rotate').set({ enable: true });
                hammer.on('pan',function(e){
                        //clipImg.style.left = clipImgX+e.deltaX+'px';
                        //clipImg.style.top = clipImgY+e.deltaY+'px';
                        var x = clipImgX+e.deltaX;
                        var y = clipImgY+e.deltaY;
                        if(x<0-window.innerWidth/2)return;
                        if(x>window.innerWidth/2)return;
                        if(y<0-window.innerHeight/2)return;
                        if(y>window.innerHeight/2)return;
                        $clipImg.css('translate',[x,y]);
                        //clipImg.style.transform = 'matrix('+ (clipImgX+e.deltaX) +','+ (clipImgY+e.deltaY) +',0,0,0,0)';
                });
                hammer.on('panend',function(e){
                        //clipImgX = parseInt(clipImg.style.left);
                        //clipImgY = parseInt(clipImg.style.top);
                        //var arrs = clipImg.style.transform.replace(/[^0-9\-,]/g,'').split(',');
                        var arrs = $clipImg.css('translate').replace(/[^0-9\-,]/g,'').split(',');
                        clipImgX = parseFloat(arrs[0]);
                        clipImgY = parseFloat(arrs[1]);
                });
                hammer.on('rotatestart',function(e){
                        clipImgR = clipImgR-e.rotation;
                });
                hammer.on('rotatemove',function(e){
                        
                        $clipImg.css('rotate',clipImgR+e.rotation);
                });
                hammer.on('rotateend',function(){
                        clipImgR = parseFloat($clipImg.css('rotate'));     
                });
                hammer.on('pinchstart',function(e){
                        clipImgS = clipImgS - e.scale;
                });
                hammer.on('pinch',function(e){
                        var s = clipImgS + e.scale;
                        if(s<0.3){s=0.3;}
                        else if(s>2){s=2;}
                        $clipImg.css('scale',s);
                });
                hammer.on('pinchend',function(e){
                        clipImgS = $clipImg.css('scale');
                });
                var isLive = false;
                btomBtnR.addEventListener('click',function(){
                        var canvas = document.createElement('canvas');
                        var w = window.innerWidth;
                        var h = window.innerHeight;
                        canvas.width = w * 2;
                        canvas.height = h * 2;
                        canvas.style.width = w + "px";
                        canvas.style.height = h + "px";
                        var ctx = canvas.getContext('2d');
                        ctx.webkitImageSmoothingEnabled = false;
                        ctx.mozImageSmoothingEnabled = false;
                        ctx.imageSmoothingEnabled = false;
                        ctx.scale(2,2);
                        if(isLive){
                                $clipImg.css('height',$clipImg.height()*9/7);
                                $clipPhoto.css('rotate','90');
                        }
                        html2canvas($(clipPhoto),{
                                        dpi:344,
                                        scale:2,
                                        onrendered:function(canvas) {
                                                canvas:canvas,
                                                clipShow.onload = function(){
                                                        showMe.innerHTML = '';
                                                        showMe.appendChild(clipShow);
                                                        $(showMe).css({'marginTop':0,'text-align':'inherit'}); 
                                                          
                                                        document.querySelector('.scene2').style.display = 'none';
                                                        document.querySelector('.scene1').style.display = 'block';
                                                        showMe.onclick = function(){};
                                                   
                                                }
                                           
                                           clipShow.src = canvas.toDataURL('image/png',1);   
                                        }
                                });   
                });
                inputImg.onchange = function(e){
                        clipImgX = clipImgY = 0;
                        clipImg.style.transform = '';
                        //document.write(e.target.files[0].type);
                        var reader = new FileReader();
                            reader.onload = function(e) {
                                    
                                clipImg.src = e.target.result;
                                clipImg.onload = function(e){
                                        if(clipImg.width>clipImg.height){
                                                clipImg.style.width = '100%';
                                        }else if(clipImg.width<clipImg.height){
                                                clipImg.style.height = '100%';
                                        }else{
                                                clipImg.style.width = '100%';
                                                
                                        }
                                       
                                };
                               
                                
                            }
                             EXIF.getData(e.target.files[0], function(){
                                      //document.write(EXIF.getTag(this, 'Orientation'));
                                                          if(EXIF.getTag(this, 'Orientation')==6){
                                                               //clipShow.style.transform = 'rotate(90deg)';
                                                               isLive = true;
                                                        
                                                        }
                                                        
                                });
                            reader.readAsDataURL(e.target.files[0]); 
                };
        </script>
</body>
</html>